<template>
    <div>
        <el-form :model="form.data" label-width="auto" ref="formRef" :rules="rules">
            <el-form-item label="页面名称" prop="templateName">
                <el-input
                    v-model="form.data.templateName"
                    placeholder="仅用于后台展示，不超过30个字"
                    maxlength="30"
                    :disabled="form.data.isHomePage == 1 || form.data.isHomePage == 3"
                    show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="展示名称">
                <el-input
                    v-model.trim="form.data.templateDesc"
                    placeholder="展示在用户端，不超过10个字"
                    maxlength="10"
                    :disabled="form.data.isHomePage == 3"
                    show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="分享描述" prop="shareTitle" v-if="form.data.isHomePage != 3">
                <el-input
                    v-model.trim="form.data.shareTitle"
                    maxlength="30"
                    show-word-limit
                    placeholder="展示在分享卡片中，不超过30个字"></el-input>
            </el-form-item>
            <el-form-item label="分享图片" prop="shareImg" v-if="form.data.isHomePage != 3">
                <ImgUpload @imgStateChange="imgChangeHandler($event, 'shareImg')" :currentImg="form.data.shareImg" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import ImgUpload from '@/components/ImgUpload.vue';
const props = defineProps(['comIndex', 'components', 'tabparam', 'form']);
let formRef = ref();
let form = reactive({ data: { templateName: '', templateDesc: '', shareImg: '', shareTitle: '', isHomePage: '2' } });
const emit = defineEmits(['changeSetting']);
const imgChangeHandler = ({ imgUrl, msg }, prop) => {
    form.data[prop] = imgUrl || '';
    if (msg) {
        ElMessage.warning(msg);
    }
};
const rules = reactive({
    templateName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
});
watch(
    () => form.data,
    val => {
        emit('changeSetting', { ...form.data, name: 'info' });
    },
    {
        deep: true
    }
);
watch(
    () => props.form,
    val => {
        Object.assign(form.data, props.form);
    },
    {
        immediate: true,
        deep: true
    }
);
</script>
<style lang="scss" scoped></style>
